<template>
    <view class="uni-shadow u-p-t-16">
        <u-row class="u-flex u-flex-wrap">
            <u-col v-for="(item,index) in memberItem" :key="index" :span="item.span" 
                class="u-m-t-20 u-font-26" style="flex-direction:row">
                <text class="u-m-r-20 u-line-1 uni-dec-color ">{{item.title}}</text>
                <uni-phone v-if="item.type=='phone'" :phone="item.value" size="13"/>
                <text v-else class="u-line-1" 
                    :style="{width:item.span==12?'78%':item.span==7?'69%':'50%'}"
                    @longtap="longTap(item.value)">{{item.value}}
                </text>
            </u-col>
        </u-row>
        <view class="u-flex u-row-right">
            <u-button class="select" type="primary" shape="circle" :plain="true" text="选择" @tap="select"></u-button>
        </view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
import tools from '@/tools/tools.js'
// import apis from '@/configs/apis.js'
// import request from '@/configs/request.js'
export default {
    name: 'memberSelect',
    props:{
        listItem: {
            type: Object,
            default () {
                return {}
            }
        },
    },
    data(){
        return{
            memberItem:[
                { field:'xm', title:'姓名', span:6, value:'' },
                { field:'zwzc', title:'工种', span:6, value:'', },
                // { field:'deptName', title:'所属单位', span:12, value:'' },
                { field:'zjhm', title:'证件号码', span:12, value: '513022202101011234'  },
                { field:'lxfs', title:'联系电话', span:6, value: '18302882468',type:'phone'  },
            ]
        }
    },
    created() {
        this.memberItem.map((v,i)=>{
            if( v.field == 'zjhm' ){
                v.value = tools.formatIdentity(this.listItem[v.field])
            }else if( v.field == 'zwzc' && this.listItem[v.field] ){
                v.value = this.listItem[v.field] ? this.listItem[v.field] : '暂无数据源'
                if( !isNaN(this.listItem[v.field]) ) this.getCommonDictTran('worktype',this.listItem[v.field],v)
            }else{
                v.value = this.listItem[v.field] ? this.listItem[v.field] : '暂无数据源'
            }
        })
    },

    methods: {
        // 长按事件
        longTap(value){
            this.$refs.uToast.show({ message: value, type: 'default', duration: 3000 })
        }, 
        // 字典值转译
        getCommonDictTran(dictType,dictValue,v){
            this.$request(this,this.$apis.CommonDictTran,{dictType:dictType,dictValue:dictValue}).then(res=>{
                if( typeof(res)=='string' ){
                    v.value = res
                }else{
                    v.value = '字典值转译值为null'
                }
            })
        },
        // 选择人员
        select(){
            this.$emit( 'selectMember',{ data:this.listItem } )
        }
    },
}
</script>

<style scoped lang="scss">
    .select{
        width: 108rpx;
        height: 50rpx;
        margin: 0;
        /deep/.u-button__text{
            font-size: 26rpx !important;
        }
    }
</style>